<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        height: 10000px;
    }

    .quyu1 {
        position: relative;
        width: 90%;
        height: 100px;
        background-color: yellowgreen;
    }

    .quyu2 {
        position: relative;
        width: 90%;
        height: 200px;
        background-color: blueviolet;
    }

    .quyu3 {
        position: relative;
        width: 90%;
        height: 3000px;
        background-color: brown;
    }

    .celan {
        position: absolute;
        width: 10%;
        height: 100px;
        background-color: aqua;
        right: 0;
        top: 200px;
    }

    .fanhui {
        position: absolute;
        display: none;
        bottom: 0;
        cursor: default;
    }
</style>

<body>
    <div class="quyu1">区域1</div>
    <div class="quyu2">区域2</div>
    <div class="quyu3">区域3</div>
    <div class="celan">
        <div class="fanhui">返回顶部</div>
    </div>
    <script>
        var quyu1 = document.querySelector('.quyu1');
        var quyu2 = document.querySelector('.quyu2');
        var quyu3 = document.querySelector('.quyu3');
        var celan = document.querySelector('.celan');
        var fanhui = document.querySelector('.fanhui');
        var celantop = celan.offsetTop - quyu2.offsetTop;
        document.addEventListener('scroll', function () {
            if (window.pageYOffset >= 100) {
                celan.style.position = 'fixed';
                fanhui.style.display = 'block';
                celan.style.top = celantop + 'px';
                fanhui.addEventListener('click', function () {
                    window.scrollTo(0, 0);
                })
            } else {
                celan.style.position = 'absolute';
                fanhui.style.display = 'none';
                celan.style.top = '200px';
            }
        })
    </script>
</body>

</html>